<template>
	<view v-if="pageShow">
		<u--form :model="formData" ref="uForm" :rules="rules" :labelPosition="formJson.labelPosition"
			:labelWidth="formJson.labelWidth">
			<template v-for="(fies,index) in formJson.fields">
				<template v-if="fies.__config__.layout=='colFormItem'">
					<u-form-item :ref="fies.__config__.formId" :id="fies.__config__.formId"
						:label="fies.__config__.showLabel?fies.__config__.label:''" prop="name" :key="index"
						:labelWidth="fies.__config__.labelWidth" :required="fies.__config__.required"
						:prop="fies.__vModel__">
						<template v-if="fies.__config__.tag=='el-input'">
							<!-- 文本输入框 -->
							<u--input v-if="fies.__config__.tagIcon=='input'" v-model="formData[fies.__vModel__]"
								:placeholder="fies.placeholder" :clearable="fies.clearable" :disabled="fies.disabled">
								<u--text v-if="fies.__slot__.prepend" :text="fies.__slot__.prepend" slot="prefix"
									margin="0 3px 0 0" type="tips"></u--text>
								<u--text v-if="fies.__slot__.append" :text="fies.__slot__.append" slot="suffix"
									margin="0 3px 0 0" type="tips"></u--text>

							</u--input>
							<!-- 密码输入框 -->
							<u--input v-if="fies.__config__.tagIcon=='password'" v-model="formData[fies.__vModel__]"
								:placeholder="fies.placeholder" :clearable="fies.clearable"
								:disabled="fies.disabled"></u--input>
							<u--textarea v-if=" fies.__config__.tagIcon=='textarea'" :placeholder=" fies.placeholder"
								v-model="formData[fies.__vModel__]" :disabled="fies.disabled"></u--textarea>
						</template>
						<template v-else-if="fies.__config__.tag=='el-input-number'">
							<!-- 计数器 -->
							<u--number-box v-if="fies.__config__.tagIcon=='number'" v-model="formData[fies.__vModel__]"
								:placeholder="fies.placeholder" :disabled="fies.disabled"></u--number-box>
						</template>
						<template v-else-if="fies.__config__.tag=='el-select'">
							<view class="inputView u--border u--input"
								@click="openPicker(fies.__slot__.options,fies.__vModel__)">
								<text v-if="!formData[fies.__vModel__]" class="placeholder">{{fies.placeholder}}</text>
								<text v-else>{{formData[fies.__vModel__+'Label']}}</text>
							</view>
						</template>
						<template v-else-if="fies.__config__.tag=='el-cascader'">
							<uni-data-picker :localdata="setCascaderData(fies.options)"
								v-model="formData[fies.__vModel__]" :popup-title="'请选择'+fies.__config__.label"
								:placeholder="fies.placeholder"></uni-data-picker>
						</template>
						<template v-else-if="fies.__config__.tag=='el-radio-group'">
							<u-radio-group v-if="fies.__config__.tagIcon=='radio'" placement="row"
								v-model="formData[fies.__vModel__]" @change="groupChange">
								<u-radio :customStyle="{marginBottom: '8px',marginRight:'8px'}"
									v-for="(item, index) in fies.__slot__.options" :key="index" :label="item.label"
									:name="item.value" @change="radioChange">
								</u-radio>
							</u-radio-group>
						</template>
					</u-form-item>
				</template>
			</template>
			<view class="btn" @click="submit">{{btnText}}</view>
		</u--form>
		<u-picker :show="pickerShow" :columns="columns" keyName="label" @confirm="pickerConfirm" @close="pickerClose"
			@cancel="pickerCancel"></u-picker>
	</view>
</template>

<script>
	export default {
		name: "dynamicForms",
		props: {
			btnText: {
				type: String,
				default: '立即报名',
			}
		},
		data() {
			return {
				pageShow: false,
				pickerDataName: '',
				pickerShow: false,
				formData: {},
				columns: [],
				formJson: {
					fields: []
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					code: {
						type: 'string',
						required: true,
						len: 4,
						message: '请填写4位验证码',
						trigger: ['blur']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					radiovalue1: {
						type: 'string',
						min: 1,
						max: 2,
						message: '生命是美好的，请不要放弃治疗',
						trigger: ['change']
					},
					checkboxValue1: {
						type: 'array',
						min: 2,
						required: true,
						message: '不能太宅，至少选两项',
						trigger: ['change']
					},
					intro: {
						type: 'string',
						min: 3,
						required: true,
						message: '不低于3个字',
						trigger: ['change']
					},
					hotel: {
						type: 'string',
						min: 2,
						required: true,
						message: '请选择住店时间',
						trigger: ['change']
					},
					'userInfo.birthday': {
						type: 'string',
						required: true,
						message: '请选择生日',
						trigger: ['change']
					},
				},

				// rules: {
				// 	phone: [{
				// 		message: "请输入正确手机号",
				// 		pattern: "/^1[3|4|5|6|7|8|9][0-9]\\d{8}$/"
				// 	}]
				// }
			};
		},
		methods: {
			submit() {
				const that = this
				// that.$refs.uForm.setRules(this.rules)
				console.log(this.$refs.uForm, that.$refs.uForm.validate);
				that.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					that.$emit('sumbit', that.formData)
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			initData(data) {
				const that = this
				let rules = {}
				data.fields.forEach(item => {
					console.log(item.__config__.regList);
					rules[item.__vModel__] = item.__config__.regList
				})
				// this.rules = rules
				// console.log(rules);
				this.formJson = data
				this.pageShow = true
				// this.$nextTick(() => {
				// 	console.log(that.$refs.uForm, that.$refs);
				// 	that.$refs.uForm.setRules(rules)
				// })
			},
			openPicker(data, name) {
				this.columns = [data]
				this.pickerShow = true
				this.pickerDataName = name
			},
			setCascaderData(datas) {
				datas.forEach(item => {
					item.text = item.label
					if (item.children) {
						this.setCascaderData(item.children)
					}
				})
				console.log(datas);
				return datas
			},
			pickerConfirm({
				value
			}) {
				const pickerDataName = this.pickerDataName
				console.log(value[0], pickerDataName);
				this.pickerShow = false
				this.formData[pickerDataName + 'Label'] = value[0].label
				this.formData[pickerDataName] = value[0].value
			},
			pickerClose() {
				this.pickerShow = false
				this.pickerDataName = ''
			},
			pickerCancel() {
				this.pickerShow = false
				this.pickerDataName = ''
			}
		},
		watch: {
			// pageShow(newV) {
			// 	if (newV) {
			// 		this.$nextTick(() => {
			// 			console.log(this.$refs.uForm, this.$refs);
			// 			this.$refs.uForm.setRules(this.rules)
			// 		})
			// 	}
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		height: 76rpx;
		background: linear-gradient(90deg, #5F96E8 0%, #1977E1 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.inputView {
		overflow: hidden;
		line-height: 26px;
		color: #303133;
		height: 24px;
		font-size: 15px;
		flex: 1;
		padding: 6px 9px;
		border-radius: 4px;
	}

	.placeholder {
		overflow: hidden;
		text-overflow: clip;
		white-space: pre;
		word-break: keep-all;
		pointer-events: none;
		line-height: inherit;
		color: rgb(192, 196, 204);
	}
</style>